<template>
  <div class="user">
    <el-dialog
      title="日志内容"
      :visible.sync="dialogLogVisible"
      @close="close"
      custom-class="custom-dialog-header"
      width="40%"
    >
      <div class="content">
        <div class="top">
          <div class="left">
            <p>
              关键字段: <span>{{ "示例文字" }}</span>
            </p>
            <p>
              源代码: <span>{{ "示例文字" }}</span>
            </p>
            <p>
              事件方法: <span>{{ "示例文字" }}</span>
            </p>
            <p>
              记录人: <span>{{ "示例文字" }}</span>
            </p>
          </div>
          <div class="right">
            <p>
              关键值: <span>{{ "示例文字" }}</span>
            </p>
            <p>
              代码路径: <span>{{ "示例文字" }}</span>
            </p>
            <p>
              记录时间: <span>{{ "2023-08-02 13:43:45" }}</span>
            </p>
            <p>
              记录IP: <span>{{ "103.23.563.76" }}</span>
            </p>
          </div>
        </div>
        <div class="bottom">
          <p>
            异常内容: <span>{{ "节点（234432）未获取下一接收人" }}</span>
          </p>
          <section>
                <div class="title">备注信息：</div>
                <div class="desc">
                    {{"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan "}}
                </div>
          </section>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLogVisible = false" type="primary">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableKey: 0,
      tableKey1: 1,

      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,

        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id",
      },
      checked: true,
      listLoading: true,
      dialogLogVisible: false,
    };
  },


  methods: {
    close() {
      this.dialogLogVisible = false;
    },
  },
};
</script>

<style lang='scss'>
.user {
  .custom-dialog-header .el-dialog__header {
    background-color: #5084fb; /* 自定义背景色 */
    /* 其他样式属性 */
    color: #ffffff;
  }
  .el-dialog__title,
  .el-dialog__headerbtn i {
    color: white;
  }
  .el-dialog__footer {
    text-align: center;
  }
  .content {
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        margin: 20px;
        font-size: 16px;
      }
    }
    .bottom {
      p {
        margin: 0 20px;
        font-size: 16px;
      }
      section{
        display: flex;
        padding: 20px;
        .title{
            font-size: 16px;
        }
        .desc{
             font-size: 16px;
             flex: 1;
        }
       
      }
    }
  }
}
</style>